<style scoped lang="less">
.table-box {
    font-size: 12px;
    .item_box {
        .item {
            // height: 30px;
            height: auto;
            width: 100px;
            border: 1px #fff solid;
        }
    }
}
</style>
<template>
    <div class="table-box">
        <!-- <div :style="`height:${viewH}px;overflow-y:scroll;`"
             @scroll="hanldeScroll">
            <div :style="{height:scorllH}">
                <div class="item_box"
                     :style="`transform:translateY(${offSetY}px); `">
                    <ul>
                        <li v-for="item in list"
                            :key="item.id"
                            class="item">{{item.content}}</li>
                    </ul>
                </div>
            </div>
        </div> -->

        <div class="ivu-table-wrapper">
            <div class="ivu-table ivu-table-border">
                <div class="ivu-table-header">
                    <div :style="`height:${viewH}px;overflow-y:scroll;`"
                         @scroll="hanldeScroll">
                        <div :style="{height:scorllH}">
                            <table cellspacing="0"
                                   cellpadding="0"
                                   border="0">
                                <colgroup>
                                    <col v-for="item in columns"
                                         :width="item.width">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th class="ivu-table-column-center"
                                            v-for="(item,index) in columns">
                                            <div class="ivu-table-cell"><span class="">{{item.title}}</span></div>
                                        </th>
                                    </tr>
                                </thead>

                                <tbody class="ivu-table-tbody"
                                       :style="`transform:translateY(${offSetY}px); `">
                                    <tr class="ivu-table-row"
                                        v-for="(rowItem, index) in list">
                                        <td class="ivu-table-column-center"
                                            v-for="item in columns">
                                            <template v-if="item.hasOwnProperty('render')">
                                                <div class="ivu-table-cell render-box">
                                                    <Cell :row="rowItem"
                                                          :column="item"
                                                          :index="index"
                                                          :render="item.render"></Cell>
                                                </div>
                                            </template>
                                            <div v-else
                                                 class="ivu-table-cell">
                                                <span title="">{{rowItem[item.key]}}</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>

                            </table>

                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
</template>

<script>
import Mock from 'mockjs';
export default {
    name: 'virtualTable',
    props: {
        // data: Array, // 数据源
        viewH: { type: Number, default: 350 }, // 可视区域高度
        itemH: { type: Number, default: 48 } // 列表单行高度
    },
    data() {
        return {
            data: [],
            lastTime: '', // 上次执行滚动事件的时刻
            scorllH: "", // 列表总高度
            list: [],    // 展示列表
            offSetY: "", // 动态偏移量
            showNum: "",  // 显示的个数
            columns: [
                {
                    title: 'id',
                    key: 'id',
                    width: 50,
                    align: 'center'
                },
                {
                    title: 'content',
                    key: 'content',
                    width: 120,
                    align: 'center'
                },
            ]
        };
    },
    created() {
        let res = Mock.mock({
            'data|33': [{
                'id|+1': 1,
                'content': '@sentence(3, 5)'
            }]
        });
        this.data = res.data;
    },
    mounted() {
        // 计算总高度
        this.scorllH = this.itemH * this.data.length + "px";
        // 计算可视区域能展示的个数 这里可以随机多加几个让滚动有个临界区间，避免向下滑动时元素直接替换
        this.showNum = this.viewH / this.itemH + 4;
        this.lastTime = new Date().getTime();
        // 默认展示
        this.list = this.data.slice(0, this.showNum);

    },
    methods: {
        hanldeScroll(e) {
            console.log(e.target.scrollTop); // 滚动条高度
            this.offSetY = e.target.scrollTop - (e.target.scrollTop % this.itemH); //设置动态偏移量模拟滚动
            this.list = this.data.slice(
                Math.floor(e.target.scrollTop / this.itemH),
                Math.floor(e.target.scrollTop / this.itemH) + this.showNum
            ); // 根据滚动条高度来截取需要展示的列表区间
            this.lastTime = new Date().getTime();

        }
    }
};
</script>